<template>
  <div>
    <a-modal title="Case修改" v-model="modalVisible" width="90%" @ok="editCase" @cancel="closeModal">
      <case-edit-form :caseInfo="selectCaseInfo.caseInfo"></case-edit-form>
      <a-tabs type="card" size="large" v-model="activeKey">
        <a-tab-pane key="0" :forceRender="true">
          <span slot="tab"><a-icon type="file-text" />需求概要</span>
          <demand-info-tab ref="demandInfo" :demandInfo="selectCaseInfo.demand"></demand-info-tab>
        </a-tab-pane>
        <a-tab-pane key="1" :forceRender="true">
          <span slot="tab"><a-icon type="file-markdown" />非功能需求</span>
          <non-functional-demand-tab ref="nonFunc" :nonFunction="selectCaseInfo.nonfunc"></non-functional-demand-tab>
        </a-tab-pane>
        <a-tab-pane v-for="(body, index) in selectCaseInfo.body" :key="index + 2" :forceRender="true">
          <span slot="tab"><a-icon type="pushpin" />交易-{{ index + 1 }}</span>
          <trans-body-tab :ref="'trans' + index" :body="body"></trans-body-tab>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import DemandInfoTab from './tabs/DemandInfoTab.vue'
import NonFunctionalDemandTab from './tabs/NonFunctionalDemandTab.vue'
import TransBodyTab from './tabs/TransBodyTab.vue'
import CaseEditForm from './CaseEditForm.vue'
export default {
  components: { DemandInfoTab, NonFunctionalDemandTab, TransBodyTab, CaseEditForm },
  name: 'caseEditModal',
  props: {
    showModal: {
      type: Boolean
    },
    selectCaseInfo: {
      type: Object
    }
  },
  data() {
    return {
      activeKey: '0',
      modalVisible: this.showModal,
      caseInfo: this.selectCaseInfo
    }
  },
  watch: {
    showModal(newVal) {
      this.modalVisible = newVal
    },
    selectCaseInfo(newVal) {
      this.caseInfo = newVal
      //几个日期格式的转换
      if (this.caseInfo.caseInfo.operationDate) {
        this.caseInfo.caseInfo.operationDate = moment(this.caseInfo.caseInfo.operationDate, 'YYYY-MM-DD')
      }
      if (this.caseInfo.demand.expectedDate) {
        this.caseInfo.demand.expectedDate = moment(this.caseInfo.demand.expectedDate, 'YYYY-MM-DD')
      }
      if (this.caseInfo.demand.expectedOperationDate) {
        this.caseInfo.demand.expectedOperationDate = moment(this.caseInfo.demand.expectedOperationDate, 'YYYY-MM-DD')
      }
    }
  },
  methods: {
    closeModal() {
      this.$emit('close', false)
    },

    editCase() {
      //修改case验证修改参数
      let flag = this.$refs.demandInfo.validateDemandInfoForm()
      if (flag != '-1') {
        this.activeKey = flag
      } else {
        let funFlag = this.$refs.nonFunc.validateNonFunc()
        if (funFlag != '-1') {
          this.activeKey = funFlag
        } else {
          //此处应该验证交易sheet？？
          for (let i = 0; i < this.caseInfo.body.length; i++) {
            let transFlag = this.$refs['trans' + i][0].valiteTransBody()
            if (!transFlag) {
              this.activeKey = i + 2
            } else {
              //验证通过后这些excel文件的保存和新建交易的工作
              this.$emit('ok', this.caseInfo)
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="less"></style>
